<template>
	<div>
		<use-table ref="tbl"></use-table>
		<div class="container padding_b_0">
			<div class="dflex_wrap">
				<div class="dflex_vertical_c margin_r_40 margin_b_20">
					<div class="search_name">名称：</div>
					<el-input v-model="req.name" placeholder="请输入" class="search_input" @change="search" clearable>
					</el-input>
				</div>
				<div class="dflex_vertical_c margin_r_40 margin_b_20">
					<div class="search_name">拼音：</div>
					<el-input v-model="req.pinyin" placeholder="请输入" class="search_input" @change="search" clearable>
					</el-input>
				</div>
				<div class="dflex_vertical_c margin_r_40 margin_b_20" v-if="advancedSearch">
					<div class="search_name">区域：</div>
					<el-cascader class="search_input" v-model="req.code" :show-all-levels="false" :options="areaOptions"
						filterable ref="cascaderObj"
						:props="{ checkStrictly: true, emitPath: false, expandTrigger: 'hover', value: 'code', label: 'name' }"
						clearable @change="search"></el-cascader>
				</div>
				<el-button size="mini" :loading="searchBtnLoading" class="search-btn margin_b_20 margin_r_40"
					@click="search">搜索</el-button>
				<div class="search_advanced margin_b_20" @click="advancedSearch = !advancedSearch"
					v-if="!advancedSearch">高级筛选</div>
				<div class="search_common margin_b_20" @click="advancedSearch = !advancedSearch" v-if="advancedSearch">
					常用筛选</div>
			</div>
		</div>
		<div class="container last_container use-table">
			<div class="dflex_sb margin_b_15 table-head">
				<div>
					<el-button class="batch-btn padding0" :loading="removesBtnLoading" @click="removes">删除<span
							v-if="selectDatas.length">×{{selectDatas.length}}</span></el-button>
				</div>
				<el-button class="add-btn pos_r padding0" icon="iconfont iconxinzeng" @click="toAdd">新增</el-button>
			</div>
			<el-table :height="tblHeight" v-loading="tableLoading" :data="tableDatas"
				@selection-change="selectionChange" highlight-current-row>
				<el-table-column type="selection"></el-table-column>
				<el-table-column property="name" label="名称" align="center"></el-table-column>
				<el-table-column property="pinyin" label="拼音" align="center"></el-table-column>
				<el-table-column property="type" label="类型" align="center"></el-table-column>
				<el-table-column property="first_letter" label="拼音首字母" align="center"></el-table-column>
				<el-table-column property="code" label="编码" align="center"></el-table-column>
				<el-table-column property="zip_code" label="邮政编码" align="center"></el-table-column>
				<el-table-column label="操作" align="center">
					<template slot-scope="scope">
						<el-tooltip :open-delay="350" content="编辑" placement="top" :hide-after="1000" :enterable="false"
							effect="light">
							<el-button circle size="medium" icon="el-icon-edit" class="table-btn"
								@click="toEdit(scope.row._id)"></el-button>
						</el-tooltip>
						<el-tooltip :open-delay="350" content="删除" placement="top" :hide-after="1000" :enterable="false"
							effect="light">
							<el-button circle size="medium" icon="el-icon-delete" class="table-btn"
								@click="remove(scope.row._id)"></el-button>
						</el-tooltip>
					</template>
				</el-table-column>
				<div slot="empty">
					<el-empty description=" "></el-empty>
				</div>
			</el-table>
			<el-pagination background :current-page="req.page" :page-sizes="[10, 20, 30, 50, 100]" :page-size="req.rows"
				layout="total, sizes, prev, pager, next, jumper" :total="tableTotal" @size-change="sizeChange"
				@current-change="currentChange"></el-pagination>
		</div>
	</div>
</template>

<script>
	const __name = 'opendb-city-china';
	export default {
		data() {
			return {
				advancedSearch: false,
				areaOptions: [],
				req: {
					page: 1,
					rows: 10,
					orderby: 'code asc',
					name: '',
					pinyin: '',
					code: ''
				},
				tblHeight: 0,
				tableLoading: false,
				tableDatas: [],
				tableTotal: 0,
				selectDatas: [],
				searchBtnLoading: false,
				removesBtnLoading: false
			};
		},
		methods: {
			async loadData() {
				this.tableLoading = true;
				await this.$db[__name]
					.noshopid()
					.noaction()
					.whereif(this.req.name, {
						name: new RegExp(this.$api.filterRegexpKey(this.req.name), 'i')
					})
					.whereif(this.req.pinyin, {
						pinyin: new RegExp(this.$api.filterRegexpKey(this.req.pinyin), 'i')
					})
					.whereif(this.req.code, {
						parent_code: this.req.code
					})
					.totable(this.req)
					.then(res => {
						if (res.code == 200) {
							res.datas.rows.forEach((row, idx) => {
								switch (row.type) {
									case 0:
										row.type = '省';
										break;
									case 1:
										row.type = '市';
										break;
									case 2:
										row.type = '区';
										break;
								}
							});

							this.tableDatas = res.datas.rows;
							this.tableTotal = res.datas.total;
						}
						this.searchBtnLoading = false;
						this.tableLoading = false;
					});
			},
			search() {
				this.req.page = 1;
				this.$api.storagePaginationPage(this.req.page, this.$route.path);
				this.searchBtnLoading = true;
				this.loadData();

				uni.setStorage({
					key: '__search' + this.$route.path,
					data: this.req
				});
			},
			toAdd() {
				uni.navigateTo({
					url: `/pages/system_set/area/area_manage_add_edit?tab=添加区域`,
					events: {
						refreshData: () => {
							this.loadData();
						}
					}
				});
			},
			toEdit(id) {
				uni.navigateTo({
					url: `/pages/system_set/area/area_manage_add_edit?id=${id}&tab=编辑区域`,
					events: {
						refreshData: () => {
							this.loadData();
						}
					}
				});
			},
			remove(id) {
				this.$confirm('此操作将永久删除该数据！', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$db[__name]
						.noshopid()
						.noaction()
						.remove(id).then(res => {
							if (res.code == 200) {
								this.loadData();
							}
						});
				});
			},
			selectionChange(datas) {
				this.selectDatas = datas;
			},
			removes() {
				if (this.selectDatas.length <= 0) {
					this.$message('请勾选需要删除的数据');
					return;
				}

				let ids = this.selectDatas.map(x => x._id);

				this.$confirm('此操作将永久删除勾选数据！', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.removesBtnLoading = true;
					this.$db[__name]
						.noshopid()
						.noaction()
						.where({
							_id: this.$db.$cmd.in(ids)
						})
						.remove()
						.then(res => {
							if (res.code == 200) {
								this.loadData();
							}
							this.removesBtnLoading = false;
						}).catch(() => {
							this.removesBtnLoading = false;
						})
				});
			},
			sizeChange(size) {
				this.$api.storagePaginationRows(size, this.$route.path);
				this.req.page = 1;
				this.$api.storagePaginationPage(this.req.page, this.$route.path);
				this.req.rows = size;
				this.loadData();
			},
			currentChange(current) {
				this.$api.storagePaginationPage(current, this.$route.path);
				this.req.page = current;
				this.loadData();
			},
			setChildren(res) {
				res.forEach(item => {
					if (item.children && item.children.length <= 0) {
						item.children = null;
						return;
					}

					this.setChildren(item.children);
				});
			}
		},
		created() {
			if (uni.getStorageSync('__search' + this.$route.path)) {
				this.req = uni.getStorageSync('__search' + this.$route.path);
				if (this.req.code) {
					this.advancedSearch = true;
				}
			}

			this.$db[__name]
				.noshopid()
				.noaction()
				.where('type < 2')
				.totree({
					orderby: 'code asc',
					loading: false
				})
				.then(res => {
					if (res.code == 200) {
						this.setChildren(res.datas);
						this.areaOptions = res.datas;
					}
				});

			this.req.page = uni.getStorageSync('__paginationPage' + this.$route.path) || 1;
			this.req.rows = uni.getStorageSync('__paginationRows' + this.$route.path) || 10;
			this.loadData();

			uni.$on('clickCloseTab', path => {
				uni.removeStorage({
					key: '__search' + path
				});
			});
		},
		updated() {
			if (!this.tblHeight) {
				this.tblHeight = this.$refs.tbl.tblHeight;
			}
		}
	};
</script>

<style></style>
